<template>
  <page-header title="站内信" background="#F7F0E6"></page-header>
  <view class="body">
    <view class="content" v-for="item in Data.list" :key="item.messageId">
      <view class="time">
        {{item.updateTime}}
      </view>
      <view class="message">
        <view class="header">
          <view class="title">
            {{item.title}}
            <!-- <view class="status"></view> -->
          </view>
        </view>
        <view class="content">
          {{item.content}}
        </view>
      </view>
    </view>
    <view v-if="isLoadAll && Data.list.length>0" class="nomore">
      没有更多了，看看别的吧
    </view>
    <empty-img v-if="isEmpty">
      <template #text>
        信息空空的，去逛逛吧~
      </template>
      <template #img>
        <image src="../../static/empty-img/message.png" mode="aspectFit"></image>
      </template>
    </empty-img>
  </view>
</template>

<script setup>
  import {
    ref
  } from 'vue'
  /**
   * 生命周期函数--监听页面加载
   */
  onLoad(() => {
    getMessage()
  })
  const isEmpty = ref(false)
  const Data = ref({})
  const queryData = ref({
    pageSize: 10,
    pageNum: 1,
    columns: "read,createTime",
    orders: "ASC,DESC"
  })
  const getMessage = () => {
    uni.showLoading()
    http.request({
      url: '/mall4cloud_point/u/message/list',
      method: 'GET',
      data: queryData.value
    }).then((res) => {
      if (queryData.value.pageNum === 1) {
        Data.value = res
      } else {
        let list = Data.value.list
        list.push(...res.list)
        Data.value.list = list
      }
      if (queryData.value.pageNum === Data.value.pages) {
        isLoadAll.value = true
      }
      if (Data.value.list.length == 0) {
        isEmpty.value = true
      } else {
        isEmpty.value = false
      }
      uni.hideLoading()
    }).catch(() => {
      isEmpty.value = true
      uni.hideLoading()
    })
  }
  /**
   * 页面上拉触底事件的处理函数
   */
  const isLoadAll = ref(false)
  onReachBottom(() => {
    if (queryData.value.pageNum < Data.value.pages) {
      queryData.value.pageNum = queryData.value.pageNum + 1
      getMessage()
    } else {
      isLoadAll.value = true
    }
  })
</script>

<style lang="scss" scoped>
  .nav-box {
    width: 100%;
    height: 90rpx;
    background-color: #f7f0e6;
    display: flex;
    justify-content: space-evenly;
    align-items: center;

    .item {
      position: relative;
      flex: 1;

      .title {
        font-family: PingFang TC, PingFang TC;
        font-weight: 600;
        font-size: 32rpx;
        color: #312619;
        line-height: 46rpx;
        text-align: center;
        z-index: 1;
      }

      .img {
        position: absolute;
        width: 60rpx;
        height: 33rpx;
        top: 26rpx;
        left: 88rpx;
      }
    }
  }

  .content {
    .time {
      padding: 20rpx;
      text-align: center;
      font-family: PingFang SC, PingFang SC;
      font-weight: 400;
      font-size: 26rpx;
      color: #999999;
      line-height: 42rpx;
    }

    .title {
      width: 424rpx;
      height: 46rpx;
      font-family: PingFang SC, PingFang SC;
      font-weight: bold;
      font-size: 32rpx;
      color: #333333;
      line-height: 46rpx;
    }

    .content {
      margin-top: 22rpx;
      width: 630rpx;
      height: 84rpx;
      font-family: PingFang SC, PingFang SC;
      font-weight: 400;
      font-size: 26rpx;
      color: #666666;
      line-height: 42rpx;
    }

    .card {
      width: 694rpx;
      box-sizing: border-box;
      padding: 10rpx 30rpx 30rpx 30rpx;
      margin: 0 auto;

      .img {
        width: 634rpx;
        height: 298rpx;
        border-radius: 10rpx 10rpx 10rpx 10rpx;
      }

      .header {
        margin-top: 30rpx;
        display: flex;
        justify-content: space-between;
        align-items: center;

        .status {
          width: 110rpx;
          height: 50rpx;
          background: #91B851;
          border-radius: 50rpx 50rpx 50rpx 50rpx;
          font-family: PingFang SC, PingFang SC;
          font-weight: 400;
          font-size: 26rpx;
          color: #FFFFFF;
          line-height: 50rpx;
          text-align: center;
        }
      }
    }

    .message {
      width: 694rpx;
      height: 210rpx;
      background: #FCFAF4;
      border-radius: 20rpx 20rpx 20rpx 20rpx;
      padding: 23rpx 30rpx 30rpx 30rpx;
      margin: 0 auto;
      box-sizing: border-box;

      .header {
        width: 100%;
        height: 69rpx;
        border-bottom: 1px solid #EAEAEA;

        .title {
          display: flex;
          width: 100%;
          align-items: center;
          justify-content: space-between;
        }

        .status {
          width: 20rpx;
          height: 20rpx;
          background: #D13027;
          border-radius: 50%;
        }
      }
    }
  }

  .empty {
    height: 600rpx;
  }
</style>
